'use client'

import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { ReactNode } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Toaster } from '@/components/ui/sonner'

import { AlertDialogProvider } from '@/components/ui/alert-dialog-provider'
type ProvidersProps = {
  children: ReactNode
}
// Create a client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false
    }
  }
})
const Providers = ({ children }: ProvidersProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <NextThemesProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
        <NextThemesProvider>
          {children}
          <Toaster position='top-center' richColors />
          <AlertDialogProvider />
        </NextThemesProvider>
      </NextThemesProvider>
    </QueryClientProvider>
  )
}

export { Providers }
